<template>
  <!-- <transition name="animate__animated" > -->
    <li :class="{MyItem:true, animate__animated:true, animate__bounceInRight:isShow, animate__bounceOutRight:!isShow}">
      <label class="labelline">
        <input
          class="checkboxbtn"
          type="checkbox"
          :checked="todo.isdone"
          @change="changeCheckedStatus(todo)"
        />
        <span :class="activeclass" v-show="!this.todo.isEdit">{{ todo.value }}</span>
        <input class="editInput" ref="editInput" type="text" :value="todo.value" v-show="this.todo.isEdit" @blur="inputOnBlur($event)">
      </label>
      <div class="btnBlock">
        <button class="updatebtn" v-show="!this.todo.isEdit && !this.activeclass.activespan" @click="changeTodo">编辑</button>
        <button class="deletebtn"  @click="del_todo">删除</button>
      </div>
    </li>
  <!-- </transition> -->
</template>

<script>
import 'animate.css'
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'MyItem',
  // 声明接受数据
  props: {
    todo: Object
  },
  data() {
    return {
      isShow: true
    }
  },
  computed: {
    ...mapState('todoData', {activeclass:'activeclass'})
  },
  methods: {
    ...mapActions('todoData', {deltodo:'deltodo'}),
    ...mapMutations('todoData', {CHANGE_CHECKED_STATUS:'CHANGE_CHECKED_STATUS', UPDATE_TODO:'UPDATE_TODO'}),
    changeCheckedStatus(todo) {
      this.CHANGE_CHECKED_STATUS(todo)
      
      // 修改样式
      this.activeclass.activespan = this.todo.isdone
    },
    del_todo() {
      this.isShow = false;
      setTimeout(() => {
        this.deltodo(this.todo)
      }, 500);
    },
    changeTodo() {
      console.log('lalalal :>> ');
      if (this.todo.hasOwnProperty('isEdit')) {
        this.todo.isEdit = true
      } else {
        this.$set(this.todo, 'isEdit', true);
      }

      this.$nextTick(() => {
        console.log('this.$refs.editInput :>> ', this.$refs.editInput);
        this.$refs.editInput.focus()
      })
    },
    inputOnBlur(e) {
      console.log('e :>> ', e);
      this.todo.isEdit = false
      if (this.todo.value == '') return alert('为空不得保存！')

      // 调用修改值的方法
      this.UPDATE_TODO({todo:this.todo, value:e.target.value})

    }
  },
  mounted() {
    this.activeclass.activespan = this.todo.isdone

    this.$eventBus.$on('selectIsAll', (flag) => {
      if (flag) {
        this.activeclass.activespan = true
      } else {
        this.activeclass.activespan = false
      }
    })
  }
}
</script>

<style scoped lang="less">
li {
  list-style-type: none;
  // padding: 0px 20px 0px 10px;
  border-bottom: 1px solid white;
}

.MyItem {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(240, 240, 240);
  position: relative;

  .labelline {
    // background-color: antiquewhite;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;

    .checkboxbtn {
      margin-right: 5px;
    }

    .activespan {
      text-decoration: line-through solid grey;
      color: grey;
    }

    .editInput{
      outline: none;
      // border:  none;
    }
  }

  .labelline:hover {
    cursor: pointer;
  }

  .btnBlock {
    // background-color: aqua;
    display: flex;
    justify-content: space-around;
    position: absolute;
    right: 30px;

    .updatebtn {
      cursor: pointer;
      margin-right: 10px;
      width: 50px;
      height: 30px;
      border-radius: 3px;
      border: none;
      margin-top: 5px;
      background-color: rgb(67, 175, 242);
      display: none;
      color: white;
    }

    .deletebtn {
      display: none;
      // position: absolute;
      cursor: pointer;
      // right: 30px;
      margin-top: 5px;
      background-color: rgb(230, 0, 0);
      border: none;
      color: white;
      width: 50px;
      height: 30px;
      border-radius: 3px;
    }

    .deletebtn:active {
      background-color: rgb(200, 0, 0);
    }
    .updatebtn:active {
      background-color: rgb(30, 154, 232);
    }
  }
}

.MyItem:hover .deletebtn {
  display: block;
}
.MyItem:hover .updatebtn {
  display: block;
}
</style>
